<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>帮助文档</title>
    <meta name="author" content="Eilvein:eilvein.com">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="icon" type="image/png" href="img/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="img/android-chrome-192x192.png" sizes="192x192">
    <link rel="stylesheet" href="css/app.css">

</head>
<body>
    <!-- index header -->
    <header id="header">
        <div class="ui-searchbar-wrap ui-border-b">
            <div class="addr-change">
                <i class="ui-icon-pin"></i>
                <a href="">北京</a>
            </div>
            <div class="ui-searchbar ui-border-radius">
                <i class="ui-icon-search"></i>
                <div class="ui-searchbar-text">城市名/景点名/主题</div>
                <div class="ui-searchbar-input"><input value="" type="tel" placeholder="城市名/景点名/主题" autocapitalize="off"></div>
                <i class="ui-icon-close"></i>
            </div>
            <button class="ui-searchbar-cancel">取消</button>
        </div>
    </header>

    <div class="doc">
        <div class="ui-center">
            <button class="ui-btn" id="btn1">模板创建弹窗</button>
            <button class="ui-btn" id="btn2">DOM创建弹窗</button>
            <button class="ui-btn" id="btn3">弹出提示</button>
            <div class="clearfix">
                <a href="http://frozenui.github.io/frozenjs/basic/tap/index.html">
                    JS交互文档看这里
                </a>
            </div>
        </div>


        <div class="ui-dialog">
            <div class="ui-dialog-cnt">
                <div class="ui-dialog-bd">
                    <div>
                        <h4>标题</h4>
                        <div>内容</div></div>
                </div>
                <div class="ui-dialog-ft ui-btn-group">
                    <button type="button" data-role="button"  class="select" id="dialogButton<%=i%>">关闭</button>
                </div>
            </div>
        </div>


    </div>

    <!-- footer -->
    <footer id="footer">
        <p>©<label id="yearHomepage">2015</label> 滑雪网</p>
    </footer>

    <div class="mask"></div>
    <script src="js/lib/zepto.min.js"></script>
    <script src="js/frozen.js"></script>

    <script>
        // 弹出层
        $("#btn1").tap(function(){
            var dia=$.dialog({
                title:'温馨提示',
                content:'温馨提示内容',
                button:["确认","取消"]
            });

            dia.on("dialog:action",function(e){
                console.log(e.index)
            });
            dia.on("dialog:hide",function(e){
                console.log("dialog hide")
            });

        })
        $("#btn2").tap(function(){
            var dia2=$(".ui-dialog").dialog("show");
            dia2.on("dialog:action",function(e){
                console.log(e.index)
            });
        })

        //消息提示
        var el;
        $("#btn3").tap(function(){
            el=$.tips({
                content:'温馨提示内容',
                stayTime:2000,
                type:"success"
            })
            el.on("tips:hide",function(){
                console.log("tips hide");
            })

        });
    </script>


</body>
</html>